<template>
  <div class="loading-con">
    <div
      class="container"
      :style="{
        background: props.bg,
        color: props.textColor
      }">

      <el-icon
        class="load"
        size="18"
        style="margin-right:5px;">
        <Loading />
      </el-icon>

      <span>{{props.text}}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Loading } from '@element-plus/icons-vue'
const props = defineProps({
  bg: {
    type: String,
    default: '#409eff'
  },

  text: {
    type: String,
    default: '场景数据加载中...'
  },

  textColor: {
    type: String,
    default: '#fff'
  }
})
</script>

<style lang="scss" scoped>
.loading-con {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;

  z-index: 9999;

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  .container {
    box-sizing: border-box;
    padding: 30px 50px;
    border-radius: 10px;
  }

  .load {
    animation: rotate 2s linear infinite;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
</style>